import React, {useState, useEffect} from 'react';
import Proptypes from "prop-types";
import {NavLink, useHistory} from "react-router-dom";
import {connect} from 'react-redux';
import {List, InputItem, Button, WhiteSpace, Toast} from 'antd-mobile';
import { loginAsync } from '@/redux/actions';

import '@/assets/css/reg-login.less';
import user_svg from '@/assets/img/user.svg';
import pwd_svg from '@/assets/img/pwd.svg';


Login.propTypes = {
    user: Proptypes.object.isRequired,
    doLogin: Proptypes.func.isRequired
}
function Login(props) {
    const history = useHistory();
    //state
    let [user, setUser] = useState('');
    let [pwd, setPwd] = useState('');

    //methods
    let {doLogin} = props;
    let handleLogin = () => {
        if(user === ''){
            return Toast.fail('请输入用户名',1);
        }else if(pwd === ''){
            return Toast.fail('请输入密码',1);
        }
        doLogin({user, pwd}, (code, msg, data) => {
            if(code === 0){
                Toast.success(msg,1, () => {

                    if(data.avatar){
                        history.replace('/home')
                    }else{
                        data.type === '1'?history.replace('/home/bossinfo'): history.replace('/home/workerinfo')
                    }

                });
            }else{
                Toast.fail(msg,1);
            }
        })
    }


    return (
        <div className="login">
            <h3>登录BOSS直聘</h3>
            <List className="reg-form">
                <InputItem
                    placeholder="用户名"
                    value={user}
                    onChange={val => setUser(val)}
                >
                    <div className="flex-vc">
                        <div style={{
                            backgroundImage: `url(${user_svg})`,
                            backgroundSize: 'cover',
                            height: '22px',
                            width: '22px'
                        }}/>
                        <p>用户名</p>
                    </div>

                </InputItem>
                <InputItem
                    type="password"
                    placeholder="密  码"
                    value={pwd}
                    onChange={val => setPwd(val)}
                >
                    <div className="flex-vc">
                        <div style={{
                            backgroundImage: `url(${pwd_svg})`,
                            backgroundSize: 'cover',
                            height: '22px',
                            width: '22px'
                        }}/>
                        <p>密&nbsp;&nbsp;&nbsp;&nbsp;码</p>
                    </div>
                </InputItem>
            </List>
            <WhiteSpace size='lg'/>
            <Button type="primary" onClick={handleLogin}>登录</Button>
            <WhiteSpace size='lg'/>
            <NavLink
                to="/register"
                className="haveAccount"
            >没有账号?</NavLink>

        </div>
    )

}
function mapStateToProps(state) {
    return {
        user: state.user
    }
}
function mapDispatchToProps(dispatch) {
    return {
        doLogin: ({user, pwd},callBack) => dispatch(loginAsync({user, pwd},callBack))
    }
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Login)